<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
	<meta name="author" content="uames">
	<meta name="description" content="practice some css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!-- <link href="css/css.css" rel="stylesheet" type="text/css"> -->
  <style>@import 'css/css.css';</style>
</head>
<body>
  <section>
    <strong>鼠标hover:</strong><p>
      <img src="img/0.jpg" class="clip-path">
      <img src="img/0.jpg" class="clip-path2 float-img">
      <a target="_blank" class="link" href="https://www.zhangxinxu.com/wordpress/2014/12/css3-svg-clip-path/embed/">点击查看来源</a>&nbsp;&nbsp;&nbsp;&nbsp;
      <a target="_blank" class="link" href="https://cubic-bezier.com/">动画根据贝塞尔曲线生成</a>
      </p><hr>
  
      <a class="link" href="css.html" download="可以修改下载文件名">a标签的download属性用于下载</a>&nbsp;&nbsp;&nbsp;&nbsp;
      <a class="link" href="css.html">a标签无download属性</a><hr>
  
      <a class="link" target="showIframe" href="https://www.baidu.com">测试a标签target="iframe的name"</a>
      <iframe src="js.html" name="showIframe"></iframe><hr size="5" color="#f0f">
  
      <span class="square">这是一个自适应的正方形<br>使用了vmin单位<br>还可以用vw,vh或vmax</span>
    <strong>这里的高度设置为height:100vh;vh表示viewport height</strong>
  </section>

  <section>
    垂直居中：
    <span class="fix-center">fixed定位top:-50%;left:-50%加<br>transform: translate(-50%, -50%)</span>

    <div class="y-center">
      <span class="word-center">一行纯文字使用：line-height</span>
      <span class="img-center">vertical-align：这里的文字参照了前面的line-height，后面的图片参照了这一行的高度<img src="img/0.jpg"></span>
      <span class="absolute-center">absolute定位top:-50%;left:-50%加<br>transform: translate(-50%, -50%)</span>
    </div>

    <img src="img/1.jpg" class="clip-path2 float-img">
    <b class="float-img" style="color:#fff">在外层加clip-path<br>实现这里图片的覆盖</b>
    <!-- <audio autoplay="autoplay" preload="auto">
      <source src="http://cdn.gzpeiyou.com/single/audio/be_happy.mp3" type="audio/mp3" />
    </audio> -->
  </section>
  <section>
    <img src="img/2.jpg" class="clip-path float-img">
  </section>
  <section>
    <img src="img/3.jpg" class="clip-path float-img">
  </section>
  
</body>
</html>
